import {Component, OnDestroy, OnInit} from "@angular/core";
import {CommService} from "../comm-service";

declare var $: any;

@Component({
  template: `
    <div class="title">
      <div class="title_text">{{comptitle}}</div>
    </div>
    <div class="tabbable-custom">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#yycl" data-toggle="tab" (click)="tab('yycl')">押运车辆</a>
          <!-- <div class="arrdowm"></div> -->
        </li>
        <li><a href="#sczd" data-toggle="tab" (click)="tab('sczd')">手持终端</a>
          <!-- <div class="arrdowm"></div> -->
        </li>
        <li><a href="#dzbq" data-toggle="tab" (click)="tab('dzbq')">电子标签</a>
          <!-- <div class="arrdowm"></div> -->
        </li>
      </ul>
      <div class="tab-content">
        <!--押运车辆-->
        <div class="tab-pane active" id="yycl">
          <div class="row">
            <form class="form-horizontal" role="form">
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="col-lg-3 control-label">车辆状态：</label>
                  <div class="col-lg-8">
                    <select class="form-control" id="clztSelect" name="clzt" [(ngModel)]="s_obj_yycl.zt">
                      <option value="">全部</option>
                      <option value="">离线</option>
                      <option value="">静止</option>
                      <option value="">运动</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="control-label col-lg-3">车辆名称：</label>
                  <div class="col-lg-8">
                    <input type="text" class="form-control" placeholder="请输入车辆名称"/>
                  </div>
                </div>
              </div>
              <div class="col-lg-2">
                <button type="button" class="btn blue" (click)="inittable_yycl()">
                  <i class="fa fa-search"></i> 搜索
                </button>&nbsp;&nbsp;&nbsp;&nbsp;
              </div>
            </form>
          </div>
          <div class="row">
            <div class="col-lg-12" *ngIf="table_yycl">
              <my-table [o]="table_yycl"></my-table>
            </div>
          </div>
        </div>
        <!--手持终端-->
        <div class="tab-pane" id="sczd">
          <div class="row">
            <form class="form-horizontal" role="form">
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="col-lg-3 control-label">终端状态：</label>
                  <div class="col-lg-8">
                    <select class="form-control" id="sczdztSelect" name="sbzt" [(ngModel)]="s_obj_sczd.zt">
                      <option value="">全部</option>
                      <option value="">离线</option>
                      <option value="">静止</option>
                      <option value="">运动</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="control-label col-lg-3">终端名称：</label>
                  <div class="col-lg-8">
                    <input type="text" class="form-control" placeholder="请输入设备IME号（多个回车换行）"/>
                  </div>
                </div>
              </div>
              <div class="col-lg-2">
                <button type="button" class="btn blue" (click)="inittable_sczd()">
                  <i class="fa fa-search"></i> 搜索
                </button>&nbsp;&nbsp;&nbsp;&nbsp;
              </div>
            </form>
          </div>
          <div class="row">
            <div class="col-lg-12" *ngIf="table_sczd">
              <my-table [o]="table_sczd"></my-table>
            </div>
          </div>
        </div>
        <!--电子标签-->
        <div class="tab-pane" id="dzbq">
          <div class="row">
            <form class="form-horizontal" role="form">
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="col-lg-3 control-label">设备状态：</label>
                  <div class="col-lg-8">
                    <select class="form-control" id="dzbqSelect" name="sbzt" [(ngModel)]="s_obj_dzbq.zt">
                      <option value="">全部</option>
                      <option value="">离线</option>
                      <option value="">静止</option>
                      <option value="">运动</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="form-group">
                  <label class="control-label col-lg-3">标签名称：</label>
                  <div class="col-lg-8">
                    <input type="text" class="form-control"/>
                  </div>
                </div>
              </div>
              <div class="col-lg-2">
                <button type="button" class="btn blue" (click)="inittable_dzbq()">
                  <i class="fa fa-search"></i> 搜索
                </button>&nbsp;&nbsp;&nbsp;&nbsp;
              </div>
            </form>
          </div>
          <div class="row">
            <div class="col-lg-12" *ngIf="table_dzbq">
              <my-table [o]="table_dzbq"></my-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [
    ".title{width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);margin-bottom: 15px;}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
  ]
})
export class TjbbSbxqZHComponent implements OnInit, OnDestroy {
  comptitle: string = "押运车辆/手持终端/电子标签详情";
  activetab: string = "yycl";
  ksjhList: any[] = [{
    DM: "0",
    MC: "2021湖北硕士研究生考试（库存49/总数49）"
  }];
  s_obj_yycl: any = {
    zt: "",
    kslx: ''
  }
  table_yycl: any;
  s_obj_sczd: any = {
    zt: "",
    kslx: ''
  }
  table_sczd: any;
  s_obj_dzbq: any = {
    zt: "",
    kslx: ''
  }
  table_dzbq: any;

  tab(activetab: string): void {
    this.activetab = activetab;
    this.search_n();
  }

  search_n(): void {
    if (this.activetab == "yycl") {
      this.inittable_yycl();
    } else if (this.activetab == "sczd") {
      this.inittable_sczd();
    } else if (this.activetab == "dzbq") {
      this.inittable_dzbq();
    }
  }

  inittable_yycl(): void {
    const that = this;
    this.table_yycl = {
      tableid: "table_yycl",
      url: "sjgz/rwjh/cxsjcrklb",
      reqobj: "",
      sidePagination: "server",
      pageSize: 10,
      pageList: [10, 20, 30],
      total: "totalRows",
      rows: "",
      columns: [{
        title: "序号",
        field: "zbmc",
      }, {
        title: "车辆名称",
        field: "kdmc",
      }, {
        title: "车辆类型",
        field: "sjbmc",
      }, {
        title: "车辆品牌",
        field: "sjbzt",
      }, {
        title: "车辆来源",
        field: "dqdz",
      }, {
        title: "车牌号",
        field: "jwd",
      }, {
        title: "车辆状态(静止,离线,运动)",
        field: "bh",
        //events: this.myevents,
        formatter: function (v) {
          let str: string = "";
          str += "<button type='button' class='btn btn-xs btn-info xq_yjjy'><i class='fa fa-search'></i> 详情</button>";
          return str;
        }
      }, {
        title: "最近一次通信时间",
        field: "jwd",
      }, {
        title: "最后一次位置",
        field: "jwd",
      }, {
        title: "经纬度",
        field: "jwd",
      }, {
        title: "车辆所属单位",
        field: "jwd",
      }]
    };
    this.table_yycl.height = this.commservice.getViewPort().height - this.commservice.topH - this.commservice.topmenuH - 240 - 50;
  }

  inittable_sczd(): void {
    const that = this;
    this.table_sczd = {
      tableid: "table_sczd",
      url: "sjgz/rwjh/cxsjcrklb",
      reqobj: "",
      sidePagination: "server",
      pageSize: 10,
      pageList: [10, 20, 30],
      total: "totalRows",
      rows: "",
      columns: [{
        title: "序号",
        field: "zbmc",
      }, {
        title: "设备名称",
        field: "kdmc",
      }, {
        title: "ID",
        field: "sjbmc",
      }, {
        title: "设备SIM卡号",
        field: "sjbzt",
      }, {
        title: "设备型号",
        field: "dqdz",
      }, {
        title: "设备状态",
        field: "jwd",
      }, {
        title: "最后一次通信时间",
        field: "bh",
        //events: this.myevents,
        formatter: function (v) {
          let str: string = "";
          str += "<button type='button' class='btn btn-xs btn-info xq_yjjy'><i class='fa fa-search'></i> 详情</button>";
          return str;
        }
      }, {
        title: "经纬度",
        field: "jwd",
      }, {
        title: "最后一次位置",
        field: "jwd",
      }, {
        title: "电量",
        field: "jwd",
      }]
    };
    this.table_sczd.height = this.commservice.getViewPort().height - this.commservice.topH - this.commservice.topmenuH - 240 - 50;
  }

  inittable_dzbq(): void {
    const that = this;
    this.table_dzbq = {
      tableid: "table_dzbq",
      url: "sjgz/rwjh/cxsjcrklb",
      reqobj: "",
      sidePagination: "server",
      pageSize: 10,
      pageList: [10, 20, 30],
      total: "totalRows",
      rows: "",
      columns: [{
        title: "序号",
        field: "zbmc",
      }, {
        title: "试卷包名称",
        field: "kdmc",
      }, {
        title: "设备ID",
        field: "sjbzt",
      }, {
        title: "设备状态（静止,离线,运动）",
        field: "jwd",
      }, {
        title: "最近一次通信时间",
        field: "jwd",
      }, {
        title: "最后一次位置",
        field: "jwd",
      }, {
        title: "经纬度",
        field: "jwd",
      }, {
        title: "ESIM串号"
      }, {
        title: "GNSS状态",
        field: "jwd",
      }, {
        title: "GNSS电量",
        field: "dqdz",
      }]
    };
    this.table_dzbq.height = this.commservice.getViewPort().height - this.commservice.topH - this.commservice.topmenuH - 240 - 50;
  }

  createSearchForm(): void {
    let ksstr_yycs: string = "";
    this.ksjhList.forEach((item) => {
      ksstr_yycs += "<option value='" + item.DM + "'>" + item.MC + "</option>";
    });
    $("#kslxSelect").append(ksstr_yycs);
    $("#kslxSelect").selectpicker({
      size: 5
    });
    this.s_obj_yycl.kslx = this.ksjhList[0].DM;

    let ksstr_sczd: string = "";
    this.ksjhList.forEach((item) => {
      ksstr_sczd += "<option value='" + item.DM + "'>" + item.MC + "</option>";
    });
    $("#kslxSelect2").append(ksstr_sczd);
    $("#kslxSelect2").selectpicker({
      size: 5
    });
    this.s_obj_sczd.kslx = this.ksjhList[0].DM;

    let ksstr_dzbq: string = "";
    this.ksjhList.forEach((item) => {
      ksstr_dzbq += "<option value='" + item.DM + "'>" + item.MC + "</option>";
    });
    $("#kslxSelect3").append(ksstr_dzbq);
    $("#kslxSelect3").selectpicker({
      size: 5
    });
    this.s_obj_dzbq.kslx = this.ksjhList[0].DM;


  }

  constructor(private commservice: CommService) {

  }

  ngOnInit() {
    this.createSearchForm();
    this.inittable_yycl();
  }

  ngOnDestroy() {

  }

}
